<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>校园闲置－找回用户名</title>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/login.css">
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/bootstrap.css">
	</head>
	<body>
		<form  method="post" id="findusername-from" action="">
		<div class="regist">
			<div class="regist_center">
				<div class="regist_top">
					<div class="left fl">找回用户名</div>
					<div class="right fr"><a href="index" target="_self">校园闲置商品交易平台</a></div>
					<div class="clear"></div>
					<div class="xian center"></div>
				</div>
				<div style="text-align:center;color:red;">提示：输入完成请移开指针进行校验</div>
				<div class="regist_main center">
					<div class="username">手&nbsp;&nbsp;机&nbsp;&nbsp;号:&nbsp;&nbsp;
						<input type="tel" name="userTel" id="userTel" class="shurukuang" required placeholder="请填写注册的手机号" />
						<span></span>
					</div>
					<div class="username">
						<div class="left fl">验&nbsp;&nbsp;证&nbsp;&nbsp;码:&nbsp;&nbsp;
							<input class="yanzhengma" type="text" name="code" id="code" required placeholder="请输入手机验证码" autocomplete="off" />
							<button type="button" class="getCode" id="getCode">获取验证码</button>
						</div>
						<span></span>
						<div class="clear"></div>
					</div>
					<div class="username" id="newUsername">新用户名:&nbsp;&nbsp;
						<input type="text" name="userUsername" id="userUsername" class="shurukuang" placeholder="请输入你的新用户名" required />
						<span></span>
					</div>
				</div>
				<div class="regist_submit">
					<input class="submit" type="button" id="submitbtn" name="submitbtn" value="找回用户名" >
				</div>
				
                <div class="regToBack"><a href="login"><i class="glyphicon glyphicon-arrow-left"></i>返回登录页面</a></div>
                
			</div>
		</div>
		</form>
	</body>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.metadata.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.validate.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.all.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/bootstrap.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			
			//修改成功提示
			if("${message}" == "成功"){
				layer.msg('用户名修改成功', {
					  icon: 1,
					  anim: 6,
					  time: 3000 //3秒关闭（如果不配置，默认是3秒）
					}, function(){
					  location.href = "login";
					}); 
			};
			
			$("#newUsername").hide();
			var usernameBooean = false; //记录用户名是否通过校验
			var telBooean = false; //记录手机号是否通过校验
			var codeBooean = false; //记录验证码是否通过校验
			var telCode = 0; //保存验证码
			
			//用户名校验
			$("#userUsername").change(function(){
				var usernameval = $("#userUsername").val();
				var regExp = new RegExp("[ `~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）&;—|{}【】‘；：”“'。，、？]");
				if(regExp.test(usernameval)){ //用户名不能包含特殊符号
					$("#userUsername").siblings("span").html("<i class='glyphicon glyphicon-remove'></i>用户名不能包含特殊符号");
					usernameBooean = false;
					console.log("用户名校验不通过" + usernameBooean);
				}else if(usernameval.length < 3 || usernameval.length > 12){ //用户名长度3－12位
					$("#userUsername").siblings("span").html("<i class='glyphicon glyphicon-remove'></i>用户名长度为3－12个字符");
					usernameBooean = false;
					console.log("用户名校验不通过" + usernameBooean);
				}else{
					$("#userUsername").siblings("span").html("<img src='${pageContext.request.contextPath}/static/image/loading.gif'>" + 
					"<i style='color:green;font-weight:normal;font-style:normal;'>检测中...</i>");
					$.ajax({
						url: "${pageContext.request.contextPath}/checkUsername",
						type: "POST",
						dataType: "json",
						data: {
							"username": usernameval,
						},
						success: function(data){
							if(true == data.res){
								$("#userUsername").siblings("span").html("<i class='glyphicon glyphicon-ok' style='color:green'></i>");
								usernameBooean = true;
								console.log("用户名校验通过" + usernameBooean);
							}else{
								$("#userUsername").siblings("span").html("<i class='glyphicon glyphicon-remove'></i>该用户名已被注册");
								usernameBooean = false;
								console.log("用户名校验不通过" + usernameBooean);
							}
						}
					})
				}
			});
			
			//手机号校验
			$("#userTel").blur(function(){
				var telval = $("#userTel").val();
				var regExp = new RegExp("^1[3|4|5|7|8][0-9]{9}$");
				if(!regExp.test(telval)){
					$("#userTel").siblings("span").html("<i class='glyphicon glyphicon-remove'></i>请正确填写手机号码");
					telBooean = false;
					console.log("手机号校验不通过" + telBooean);
				}else{
					$("#userTel").siblings("span").html("<i class='glyphicon glyphicon-ok' style='color:green'></i>");
					telBooean = true;
					console.log("手机号校验通过" + telBooean);
				}
			});
			
			//验证码校验
			$("#code").blur(function(){
				var codeval = $("#code").val();
				if(telCode == 0){
					$("#code").parent().siblings("span").html("<i class='glyphicon glyphicon-remove'></i>请点击获取验证码");
					codeBooean = false;
					console.log("请先获取验证码" + codeBooean);
				}else{
					if(telCode == codeval){
						$("#code").parent().siblings("span").html("<i class='glyphicon glyphicon-ok' style='color:green'></i>");
						codeBooean = true;
						console.log("验证码校验通过" + codeBooean);
						$("#newUsername").slideDown(); //验证码校验通过时显示用户名输入框
						$("#userTel").attr("readonly", true); //验证码校验通过时手机输入框禁止修改
						$("#code").attr("readonly", true); //验证码校验通过时验证码输入框禁止修改
					}else{
						$("#code").parent().siblings("span").html("<i class='glyphicon glyphicon-remove'></i>验证码不正确");
						codeBooean = false;
						console.log("验证码校验不通过" + codeBooean);
					}
				}
			});
			
			//点击获取验证码按键
			$("#getCode").on("click", function(){
				var telval = $("#userTel").val();
				var regExp = new RegExp("^1[3|4|5|7|8][0-9]{9}$");
				if(!regExp.test(telval)){
					$("#userTel").siblings("span").html("<i class='glyphicon glyphicon-remove'></i>请正确填写手机号码");
					telBooean = false;
					console.log("手机号校验不通过" + telBooean);
				}else{
					//校验手机是否已通过校验
					if(telBooean == false){
						$("#code").parent().siblings("span").html("<i class='glyphicon glyphicon-remove'></i>请正确填写手机号码");
						return;
					}
					
					//按钮一分钟内不能再次点击
					$("#getCode").attr("disabled", "disabled");
					var time = 60; //60s
					var setitv = setInterval(setitvfun, 1000);
					function setitvfun(){
						time--;
						$("#getCode").text(time + "S");
						if(time == 0){
							clearInterval(setitv);
							if(codeBooean == false){
								$("#getCode").removeAttr("disabled");
							}
							$("#getCode").text("获取验证码");
						}
					}
					
					//手机号校验通过时进行发送短信
					$.ajax({
						url: "getCode",
						type: "POST",
						dataType: "json",
						data: {
							"telval": telval,
							"getCodeType": "findUsername",
						},
						success: function(data){
							if(true == data.bool){
								telCode = data.telCode;
								$("#getCode").parent().siblings("span").html("<i style='color:green;font-style:normal'>验证码已发至手机，请注意查收</i>");
							}else{
								if(data.telCode == "00141"){
									layer.alert("一小时内只能发送4条验证码", {icon: 2,anim: 0});
								}else if(data.telCode == "00142"){
									layer.alert("该手机号今天获取验证码已上限", {icon: 2,anim: 0});
								}else{
									layer.alert("请联系客服，错误状态码为：" + data.telCode, {icon: 2,anim: 0});
								}
							}
						}
					})
				}
			});
			
			//点击注册
			$("#submitbtn").on("click", function(){
				//校验全部通过
				if(usernameBooean && telBooean && codeBooean){
					$("#findusername-from").attr("action", "updateUsername");
					$("#findusername-from").submit();
				}else{
					if(!usernameBooean){
						$("#userUsername").siblings("span").html("<i class='glyphicon glyphicon-remove'></i>请输入正确的用户名");
					}else if(!telBooean){
						$("#userTel").siblings("span").html("<i class='glyphicon glyphicon-remove'></i>请正确填写手机号码");
					}else if(!codeBooean){
						$("#code").parent().siblings("span").html("<i class='glyphicon glyphicon-remove'></i>验证码不正确");
					}
				}
			});
		})
	</script>
</html>
